<template>
	<view style="background-color:aliceblue; border-radius: 15px; padding: 10px; ">
		 
		<view class="title-img-row" v-if="isOneImg && isOneImg.length > 0">
			 
			
			 <!-- 图 -->
			<view class="single-img-container">
				<image 
					:src="isOneImg[0]" 
					mode="aspectFill"
					@error="handleImageError()" 
					style="width: 100px; height: 80px; border-radius: 8px;"
				></image>
			</view>
			
			<!-- 标题 -->
			
			<view class="title-container">
				<text style="
				font-size: 20px; 
				line-height: 1.4; 
				display: -webkit-box; 
				-webkit-box-orient: vertical; 
				-webkit-line-clamp: 2; 
				overflow: hidden; 
				text-overflow: ellipsis;">{{ title }}</text>
			</view>
		</view>
		
		 

		<!-- 原标题区域  -->
		<view v-else class="title-only" 
		style="font-size: 20px; 
		       padding-left: 5px; 
			   display: -webkit-box; 
			   -webkit-box-orient: vertical; 
			   -webkit-line-clamp: 2; 
			   overflow: hidden; 
			   text-overflow: ellipsis;">
			<text>{{ title }}</text>
		</view>

		<!-- 多图区域  -->
		<view class="img-container" v-if="images && images.length > 0">
			<image 
				v-for="(img, index) in images.slice(0,3)" 
				:key="index" 
				:src="img" 
				mode="aspectFill"
				style="width: calc((100% - 10px)/3); height: 80px; border-radius: 8px;"
			></image>
		</view>

		<!--  插槽 -->
		<view class="content-container">
			<slot name="search-container"></slot>
		</view>

		<!-- 底部  -->
		<view class="content-container">
			<text :hidden="!isTop" style="color: red;">置顶</text>
			<text :hidden="!isguang" style="color: blue;">广告</text>
			<text>{{author}}</text>
			<text>{{count}}条</text>
			<view class="timeFlexEnd">
				<text>{{time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "newsView",
		
		data(){
			return{
				errImage:'/static/default-image.png'
			}
		},
		props: {
			title: {
				type: String,
				default: '新闻标题',
				required: true, // 修正拼写：require → required
			},
			author: {
				type: String,
				default: '作者',
				required: true,
			},
			count: {
				type: String,
				default: '0',
				required: true,
			},
			time: {
				type: String,
				default: '2025-10-28',
				required: true,
			},
			isTop: {
				type: Boolean,
				default: true,
				required: true
			},
			images: {
				type: Array,
				default: () => [] 
			},
			 
			isOneImg: {
				type: Array,
				default: () => [] 
			},
			isguang: {
				type: Boolean,
				default: false,
				required: true
			},
		},
		methods: {
			gotoDetailPage() {
				 
			},
			
			handleImageError(){
				this.isOneImg[0] = this.errImage; 
			}
		}
	}
</script>

<style>
	.timeFlexEnd {
		flex: 1;
		display: flex;
		justify-content: flex-end;
		margin-right: 10px;
	}

	.content-container {
		display: flex;
		justify-content: space-between;
		padding-left: 5px;
		margin-top: 8px;
	}

	.content-container text {
		margin-right: 10px;
		font-size: 15px;
		color: gray;
	}

	.img-container {
		display: flex;
		flex-wrap: wrap;
		padding: 5px 0;
		gap: 5px;
	}

	 
	.title-img-row {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 8px;
	}
	.title-container {
		flex: 1;
	}
	.single-img-container {
		width: 100px;
	}
</style>